<!--
 * @Author: Haochen
 * @Date: 2021-12-07 17:37:29
 * @LastEditTime: 2021-12-13 14:46:09
 * @FilePath: \students-system\src\views\students\StudentsList.vue
-->
<template>
  <div class="students-list">
    <el-table
      :data="students"
      border
      style="width: 100%"
      :header-cell-style="rowClass"
      :cell-style="rowClass"
      >>
      <el-table-column label="学生编号">
        <template slot-scope="scope">
          <span>{{ scope.row._id.substr(-5) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学生头像">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.imagePath" :size="large" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="学生名字"> </el-table-column>
      <el-table-column prop="age" label="学生年龄"> </el-table-column>
      <el-table-column prop="gender" label="学生性别"> </el-table-column>
      <el-table-column label="学生专业">
        <template slot-scope="scope">
          <span>{{
            scope.row.subjectsId ? scope.row.subjectsId.name : '未选择专业'
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="学生班级">
        <template slot-scope="scope">
          <span>{{
            scope.row.classesId ? scope.row.classesId.name : '未选择班级'
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row._id)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteStudentData(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <Pages
      :total="total"
      :currentPage="pageData.currentPage"
      :pageSize="pageData.pageSize"
      @prevPage="prevPage"
      @nextPage="nextPage"
    />
  </div>

  <!-- <div class="students-list">
    <bread-crumb></bread-crumb>
    <h2>学生列表</h2>
    <table>
      <tr>
        <th>学生编号</th>
        <th>学生姓名</th>
        <th>学生头像</th>
        <th>学生年龄</th>
        <th>学生性别</th>
        <th>学生专业</th>
        <th>学生班级</th>
        <th>学生操作</th>
      </tr>

      <tr v-for="student in students" :key="student._id">
        <td class="sid">{{ student._id.substr(-5) }}</td>
        <td>{{ student.name }}</td>
        <td><img :src="student.imagePath" alt="" /></td>
        <td>{{ student.age }}</td>
        <td>{{ student.gender }}</td>
        <td>
          {{ student.subjectsId ? student.subjectsId.name : '未选择专业' }}
        </td>
        <td>
          {{ student.classesId ? student.classesId.name : '未选择班级' }}
        </td>

        <td>
          <router-link :to="'/home/updateStudent/' + student._id" tag="button"
            >修改</router-link
          >&nbsp;
          <button href="#" @click.prevent="deleteStudentData(student._id)">
            删除
          </button>
        </td>
      </tr>
    </table>

    <div class="stats-row">
      <span>共{{ total }}条数据</span>
      <span> 页码 {{ pageData.currentPage }} / {{ pages }} </span>
    </div>
    <Pages
      @prevPage="prevPage"
      @nextPage="nextPage"
      @firstPage="firstPage"
      @lastPage="lastPage"
    />
  </div> -->
</template>

<script>
import Pages from '../../components/common/Pages.vue';
import bus from './bus';
import BreadCrumb from '../../components/common/BreadCrumb.vue';
import { createNamespacedHelpers } from 'vuex';

const { mapActions: studentsActions, mapState: studentsState } =
  createNamespacedHelpers('students');

export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      searchData: {
        value: '',
      },
      pageData: {
        currentPage: 1, //当前页码
        pageSize: 5, // 每页显示条数
      },
    };
  },
  computed: {
    ...studentsState({
      students: 'rows',
      pages: 'pages',
      total: 'total',
    }),
  },
  created() {
    this.getStudentsAsync(this.pageData);

    // * 设置添加新学生传来数据的监听器
    // bus.$on('addNewStudent', (data) => {
    //   this.addStudentData({ ...data });
    // });

    bus.$on('handleSizeChange', (size) => {
      this.pageData.pageSize = size;
      this.getStudentsAsync(this.pageData);
    });

    bus.$on('handleCurrentChange', (currentPage) => {
      this.pageData.currentPage = currentPage;
      this.getStudentsAsync(this.pageData);
    });
  },
  methods: {
    ...studentsActions(['getStudentsAsync']),
    rowClass() {
      return 'text-align:center';
    },
    // * 删除一个学生
    async deleteStudentData(id) {
      const { data } = await this.$api.students.deleteStudent({
        _id: id,
      });

      if (data.code) {
        alert(data.message);
      }

      this.getStudentsAsync(this.pageData);
    },

    handleEdit(id) {
      this.$router.push('/home/updateStudent/' + id);
    },

    // * 上一页功能
    prevPage() {
      if (this.pageData.currentPage == 1) {
        return;
      }
      this.pageData.currentPage--;
    },

    // * 下一页功能
    nextPage() {
      if (this.pageData.currentPage == this.pages) {
        return;
      }
      this.pageData.currentPage++;
    },

    // // * 首页功能
    // firstPage() {
    //   this.pageData.currentPage = 1;
    // },
    // // * 尾页功能
    // lastPage() {
    //   this.pageData.currentPage = this.pages;
    // },
  },
  watch: {
    pageData: {
      handler() {
        this.getStudentsAsync(this.pageData);
      },
      deep: true,
    },
    'pageData.pageSize'() {
      this.pageData.currentPage = 1;
      this.getStudentsAsync(this.pageData);
    },
  },
  // computed: {
  //   filterStudents() {
  //     if (!this.searchQuery) {
  //       let startIndex = (this.pageData.curPage - 1) * this.pageData.pageSize;
  //       return this.students.slice(
  //         startIndex,
  //         startIndex + this.pageData.pageSize
  //       );
  //     } else {
  //       return this.students.filter(
  //         (s) => s[this.searchType].toString().indexOf(this.searchQuery) !== -1
  //       );
  //     }
  //   },
  // },
  components: {
    Pages,
    BreadCrumb,
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: rgb(124, 124, 124);
}

.students-list {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
.students-list table {
  margin: 20px 0;
  width: 100%;
  text-align: center;
  border: 1px solid #ccc;
  border-collapse: collapse;
}

.students-list table tr td,
th {
  width: 10%;
  height: 50px;
  border: 1px solid #ccc;
}

.students-list table tr td img {
  width: 50px;
  height: 50px;
}

.students-list .stats-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.sid {
  padding: 0 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
